import { Component } from 'react';
import DemoState from './01.定义状态'
import DemoEventFn from './02.事件处理-更改this指向';
import DemoForm from './03.受控与非受控组件';

class Demo extends Component {
    constructor() {
        super()
        this.state = {
            like: '看书',
            count: 0
        }
    }
    changeLike() {
        // this-undefined
        this.setState({
            like: '喜欢敲代码-codding'
        })
    }

    //    add (num) {
    //      this.setState({
    //        count: this.state.count + num
    //      })
    //    }

    add = (num) => {
        this.setState({
            count: this.state.count + num
        })
    }
    
    getId = (e) => {
        console.log('e', e.target.dataset.id)
    }

    username = 'zhangshan'
    render() {
        return (
            <>
                <h2>案例（知识点）</h2>
                <DemoState />
                <DemoEventFn />
                <DemoForm />
                count++:  {this.state.count}
                {/* <button onClick={this.add.bind(this, 5)}>点击count++</button> */}
                <button onClick={() => this.add(5)}>点击count++</button>
                <button data-id='100' onMouseLeave={(e)=> this.getId(e)}>点击跳转详情</button>
            </>
        );
    }
}

export default Demo;